// axios.get('/students').then(res => {
//     console.log(res.data);
//     render(res)

//     // 删除指定学生
//     document.querySelector('.text-danger').addEventListener('click', function (e) {
//         e.preventDefault()// 阻止默认行为
//         if (e.target.classList.contains('bi-trash')) {
//             console.log(e.target.parentNode.parentNode.dataset.id);
//             const delID = e.target.parentNode.parentNode.dataset.id
//             delStudent(delID)
//         }
//     })


//     /* 
//     1，跳转修改学生页面， 用到forEach遍历元素并监听
//     2，跳转页面获取父父元素的配置的data-id的值并赋值到url中，方便修改页面通过id获取数据
// 修改图书.html?id=595789
// */
//     const studentAllBox = document.querySelectorAll('.text-success')
//     studentAllBox.forEach(function (element) {
//         element.addEventListener('click', function (e) {
//             // e.preventDefault(); // 阻止默认行为
//             console.log(e.target.parentNode.parentNode.dataset.id);
//             location.href = `./modifystudent.html?id=${e.target.parentNode.parentNode.dataset.id}`;
//         });
//     });


// })

// 渲染
// function render(res) {
//     let str = '';
//     str = res.data.map(v => {
//         return `   
//                     <tr>
//                                 <td>${v.name}</td>
//                                 <td>${v.age}</td>
//                                 <td>${v.gender ? '女' : '男'}</td>
//                                 <td>第${v.group}组</td>
//                                 <td>${v.hope_salary}</td>
//                                 <td>${v.salary}</td>
//                                 <td>${v.province + v.city + v.area}</td>
//                                 <td data-id="${v.id}">
//                                     <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${v.id}></i></a>
//                                     <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${v.id}></i></a>
//                                 </td>
//                     </tr> 
//                 `
//     }).join('')

//     // console.log(str);
//     document.querySelector('.list').innerHTML = str

// }

// 删除接口
async function delStudent(delID) {
    await axios.delete('/students/' + delID)
        .then(res => {
            pxmu.success('删除成功')
            setTimeout(() => {
                location.href = './student.html'
            }, 1000);
        })
}

// // 跳转添加学生页面
// document.querySelector('#openModal').addEventListener('click', function (e) {
//     e.preventDefault()// 阻止默认行为
//     location.href = './addstudent.html'
// })


// 跳转添加学生页面   本页面弹框
document.querySelector('#openModal').addEventListener('click', function (e) {
    e.preventDefault()// 阻止默认行为
    const modal = new bootstrap.Modal(document.querySelector('#modal'))
    modal.show()
    // location.href = './addstudent.html'
})


// 添加接口
async function addStudent(body) {
    await axios.post('/students', body)
        .then(res => {
            pxmu.success('添加成功')
            setTimeout(() => {
                location.href = './student.html'
            }, 1000);

        })
}

document.querySelector('#submit').addEventListener('click', function (e) {
    e.preventDefault()// 阻止默认行为
    const form = document.querySelector('#form');
    let data = serialize(form, { hash: true, empty: true })
    if (!data.age || !data.hope_salary || !data.salary || !data.group) {
        console.log(data)
        pxmu.toast('请正确填写所有必填项')
        return
    }

    data.age = parseInt(data.age)
    data.gender = parseInt(data.gender)
    data.hope_salary = parseInt(data.hope_salary)
    data.salary = parseInt(data.salary)
    data.group = parseInt(data.group)
    // console.log(data);
    addStudent(data)


})
/* ---------------------------------------------------------- */
//页面元素定义
const tbodyBox = document.querySelector('.list')
const bsModal =  new bootstrap.Modal(document.getElementById('modal'))
// =====操作数据 - 和服务器打交道====
// 获取省的接口
async function getProvince() {
    const res = await axios.get('/api/province') // {  "message": "获取省份成功", "list": [ .... ] }
    return res.list

}
// 获取市的接口
async function getCity(pname) {
    const res = await axios.get('/api/city?pname=' + pname) // {  "message": "获取城市成功", "list": [ .... ] }
    return res.list

}
// 获取地区的接口
async function getArea(pname, cname) {
    const res = await axios.get(`/api/area?pname=${pname}&cname=${cname}`) // {  "message": "获取地区成功", "list": [ .... ] }
    return res.list
}
// 根据id获取学生的详情数据
async function getStudentInfoData(id) {
    try {
        let res = await axios.get('/students/' + id)
        return res  //{  "message": "查询学生详情成功", "data": {...} }
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取学生详情数据异常，检查网络')
    }
}
// 修改学生的详情数据
async function putStudentInfoData(id, body) {
    // await axios.put('/students/' + id, body)
    //     .then(res => {
    //         pxmu.success('修改成功')
    //         console.log(res);
    //         setTimeout(() => {
    //             location.href = './student.html'
    //         }, 1000);

    //     })
        try {
            let res = await axios.put('/students/' + id, body)
            return res  
        } catch (error) {
            pxmu.fail(error.response && error.response.data.message || '修改学生数据异常，检查网络')
        }

}
// 获取学生列表数据列表
async function getStudentsData() {
    try {
        let res = await axios({ url: '/students' })
        return res  // {message:'',data:[{}]}
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取学生列表数据异常，检查网络')
    }
}
// =====渲染界面 - 和界面打交道====
// 1. 渲染学生数据到表格中
async function renderStudents() {
    let { data } = await getStudentsData()
    let str = '';
    data.forEach(v => {
        str += `   
                <tr>
                            <td>${v.name}</td>
                            <td>${v.age}</td>
                            <td>${v.gender ? '女' : '男'}</td>
                            <td>第${v.group}组</td>
                            <td>${v.hope_salary}</td>
                            <td>${v.salary}</td>
                            <td>${v.province + v.city + v.area}</td>
                            <td data-id="${v.id}">
                                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${v.id}></i></a>
                                <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${v.id}></i></a>
                            </td>
                </tr> 
            `
    })

    document.querySelector('.list').innerHTML = str
    document.querySelector('.total').innerHTML = data.length

}




//====各种事件 -- 和用户打交道====
// 1.1 编辑事件
function registerClickHanderForTbody() {
    tbodyBox.addEventListener('click', function (e) {
        // console.log(e.target);

        // if (e.target.closest('bi bi-pen')) { // 无法找到， 后续确认
        if (e.target.className =='bi bi-pen') {
            // console.log(e.target.dataset.id);
            let {data} = getStudentInfoData(e.target.dataset.id)
            console.log(data);
            
            alert('编辑')
        }
        if (e.target.className =='bi bi-trash') {
            console.log(e.target.dataset.id);
            alert('删除')
        }
    })

}



// ==== 页面进入时， 各种方法调用初始化====
renderStudents()
registerClickHanderForTbody()